<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
    <link rel="stylesheet" href="TemplateUI/NavTemplate/NavTemplate.css"/>
    <link rel="stylesheet" href="TemplateUI/NavTemplate/NavTemplate_md.css"/>
    <link rel="stylesheet" href="TemplateUI/NavTemplate/NavTemplate_sm.css"/>
    <link href="css/release_Article_sm.css" rel="stylesheet" type="text/css">
    <link href="css/release_Article_md.css" rel="stylesheet" type="text/css">
   </head>
<body>
<!--发布文章-->
<div class="nav">
    <a class="logo_Astray">Astray</a>
    <ul class="nav_ul">
        <li class="nav_li">首页</li>
        <li class="nav_li">文章</li>
        <li class="nav_li">问答</li>
        <li class="nav_li">测试</li>
        <li class="nav_li">FM</li>
        <li class="nav_li">更多</li>
    </ul>
    <ul class="nav_ul_info">
        <li><img src="img/headPhoto.png" width="2rem"></li>
        <li>消息</li>
        <li>通知</li>
    </ul>
</div>
<div class="body">
    <form action="#" method="get">
    <div id="articlePhoto" class="articleCard">
        <div id="cover">
            <img src="img/headPhoto.png"/>
            <p class="bigFont">点击更换封面图片</p>
            <label>最佳尺寸：900x600px</label>
        </div>
    </div>
    <input type="file" id="file" style="display: none;"/>
    <input type="text" id="articleTitle" placeholder="请输入文章标题">
    <div id="editor"></div>
    <div id="tabs">
        <div class="tab">
            <input type="text" placeholder="编辑标签" maxlength="4" class="tabContent">
            <span class="tabClose">x</span>
        </div>
        <input type="button" value="+" id="addTab">
    </div>
    <div id="articleBtn">
        <input type="button" id="draft" value="存草稿">&nbsp;
        <input type="submit" id="publish" value="发布">
    </div>
    </form>
</div>
</body>
    <script type="text/javascript" charset="utf-8" src="js/jquery-3.2.1.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/wangEditor.min.js"></script>
    <script type="text/css" charset="utf-8" src="css/wangEditor.min.css"></script>
    <script type="text/javascript">
        $(function () {
            //富文本编辑器
            var E = window.wangEditor;
            var editor = new E('#editor');
            // 或者 var editor = new E( document.getElementById('editor') )
            editor.customConfig.menus = [
                'head',  // 标题
                'bold',  // 粗体
                'italic',  // 斜体
                'underline',  // 下划线
                'strikeThrough',  // 删除线
                'foreColor',  // 文字颜色
                'backColor',  // 背景颜色
                'link',  // 插入链接
                'list',  // 列表
                'justify',  // 对齐方式
                'quote',  // 引用
                'emoticon',  // 表情
                'image',  // 插入图片
                'table',  // 表格
                'undo',  // 撤销
                'redo'  // 重复
            ]
            editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
            // editor.customConfig.uploadImgServer = '/upload'  // 上传图片到服务器
            // 隐藏“网络图片”tab
            editor.customConfig.showLinkImg = false
            editor.create();

            var tab=$(".tab").prop("outerHTML");
            //添加标签
            $("#addTab").click(function(){
                var flag=true; //没有标签为空
                $(".tabContent").each(function(){
                    if($(this).val()==""){ //有标签为空
                        $(this).focus();
                        flag=false;
                        return;
                    }
                });
                if(flag) {
                    if ($(".tabContent").length >= 3) { //超出标签数量
                        alert("文章最多3个标签！");
                        return;
                    }
                    $(this).before(tab);
                }
            });
            //移除标签
            $("body").on("click",".tabClose",function(){
                $(this).parent().remove();
            });
            //点击图片框触发file元素
            $("#articlePhoto").click(function(){
                $("#file").trigger("click");
            });
            //选择图片后触发
            $("#file").change(function(){
                if (typeof (FileReader) != "undefined") {
                    var regex = /(.jpg|.jpeg|.gif|.png|.bmp)/i;
                    $($(this)[0].files).each(function () {
                        var file = $(this);
                        if (regex.test(file[0].name)) {
                            var reader = new FileReader();
                            reader.onload = function (e) {
                                var img = $("<img />");
                                img.attr("src", e.target.result);
                                $("#cover").html(img);
                            }
                            reader.readAsDataURL(file[0]);
                        } else {
                            alert(file[0].name + " is not a valid image file.");
                            return false;
                        }
                    });
                } else {
                    alert("This browser does not support HTML5 FileReader.");
                }
            });
        });

    </script>
</html>